<template>
	<!-- 周例会 -->
	<view class="body">
		<myHeader :title="title"></myHeader>

		<view class="mt-20 p-20">
			<uni-forms :value="formData" ref="form" :rules="rules">
				<uni-forms-item label="会议名称" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item label="会议主题" name="theme">
					<uni-easyinput type="text" v-model="formData.theme" placeholder="请输入会议主题" />
				</uni-forms-item>
				<uni-forms-item label="会议室" name="room">
					<uni-easyinput type="text" v-model="formData.room" placeholder="请输入议室" />
				</uni-forms-item>
				<uni-forms-item label="时间" name="time">
					<uni-datetime-picker v-model="formData.time"></uni-datetime-picker>
				</uni-forms-item>
				<!-- 文件上传 -->
				<uni-file-picker limit="1" :auto-upload="true" mode="list" file-mediatype="all" @select="select">
				</uni-file-picker>
				<progress v-if="progressVal != 0" activeColor="#4CAF50" :percent="progressVal"
					stroke-width="10"></progress>
				<button class="mtb-20 bg-red text-white" @click="submit">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import myHeader from '../../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {

		data() {
			return {
				title: '新增周例会',
				formData: {
					name:'',
					theme:'',
					room:'',
					time:''
				},
				// 文件上传后的url
				fileUrl: '',
				// 文件类型
				fileType: ".pdf,.doc,.docx",
				progressVal: 0,
				// 表单验证
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					// 对email字段进行必填验证
					theme: {
						rules: [{
							required: true,
							errorMessage: '请输入主题',
						}]
					},
					room: {
						rules: [{
							required: true,
							errorMessage: '请输会议室',
						}]
					},
					time: {
						rules: [{
							required: true,
							errorMessage: '请输入开始时间',
						}]
					}
				}
			}
		},
		methods: {
			checkboxChange: function(e) {
				var items = this.users,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			submit() {
				this.$refs.form.submit().then(res => {
					let param = {
						"file": this.fileUrl,
						"name": this.formData.name,
						"room": this.formData.room,
						"time": this.formData.time,
						"theme": this.formData.theme,
					}
					NetWorkTool.POST('/api/federation-week/meeting', param, true).then(res => {
						uni.showToast({
							title: res.message,
							duration: 2000
						});
						this.formData = {};
						uni.navigateTo({
							url: './weeklyMeeting'
						})
					});
				}).catch(err => {
					uni.showToast({
						title: "请完成信息填写",
						duration: 2000,
						icon: 'none',
					});
				})
			},
			// 获取上传状态
			select(e) {
				let source = e.tempFiles[0];
				let token = '';
				uni.getStorage({
					key: 'AuthToken',
					success(e) {
						token = e
					}
				})
				const uploadTask = uni.uploadFile({
					url: '/api/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'x-access-token': token.data
					},
					formData: {
						'name': source.name,
						'size': source.size
					},
					success: (res) => {
						this.fileUrl = JSON.parse(res.data).data.url;
						uni.showToast({
							title: "上传成功",
							duration: 2000
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progressVal = res.progress;
					this.fileUrl = res.url;
				});
			},

		},
		components: {
			myHeader
		},
	}
</script>

<style>
	@import url("/static/party_building/assets/style/federation.css");
</style>
